<template>
  <div class='container app-container'>
    <el-card class="box-card">
      <!--      上方表单-->
      <questions-screen @search="onSearch"/>
      <!--下面表格-->
      <title-alert :counts="counts"/>
      <el-table :data="tableData" fit style="width: 100%">
        <el-table-column label="试题编号" prop="number" width="120">
        </el-table-column>
        <el-table-column label="学科" prop="subject">
        </el-table-column>
        <el-table-column label="目录" prop="catalog">
        </el-table-column>
        <el-table-column label="题型">
          <template v-slot="{row}">{{ questionType(row.questionType - 0) }}</template>
        </el-table-column>
        <el-table-column label="题干" width="280">
          <template v-slot="{row}">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template v-slot="{row}">
            {{ new Date(row.addDate) |parseTime }}
          </template>
        </el-table-column>
        <el-table-column label="难度" prop="address">
          <template v-slot="{row}">{{ difficulty(row.difficulty - 0) }}</template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator">
        </el-table-column>
        <el-table-column fixed="right" label="操作" prop="address" width="180">
          <template v-slot="{row}">
            <el-button circle icon="el-icon-view" plain size="small" title="预览" type="primary"
                       @click="topicPreview(row.id)"></el-button>
            <el-button circle icon="el-icon-edit" plain size="small" title="修改" type="success"
                       @click="$router.push('/questions/new?id='+row.id)"></el-button>
            <el-button circle icon="el-icon-delete" plain size="small" title="删除" type="danger"
                       @click="delBtn(row.id)"></el-button>
            <el-button circle icon="el-icon-check" plain size="small" title='加入精选' type="warning"
                       @click="toFeatured(row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-row align="middle" justify="end" style="height: 60px" type="flex">
        <page-tool
          :paginationPage="pageData.page"
          :paginationPagesize="pageData.pagesize"
          :total="counts"
          @pageChange="handleCurrentChange"
          @pageSizeChange="handleSizeChange"
        />
      </el-row>
    </el-card>
    <questions-preview v-if="dialog" v-model="dialog" :topicInfo="topicInfo" @destroy="topicInfo={}"/>
  </div>
</template>

<script>
import QuestionsScreen from '@/module-hmmm/components/questions-screen'
import {
  choiceAdd,
  detail as questionDetail,
  list as questionList,
  remove as questionRemove
} from '@/api/hmmm/questions'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import PageTool from '@/module-dashboard/components/pageTool'
import TitleAlert from '@/module-hmmm/components/title-alert'

export default {
  components: { TitleAlert, PageTool, QuestionsScreen, QuestionsPreview },
  data () {
    return {
      pageData: {
        page: 1, // 当前页数
        pagesize: 5 // 每页几条
      },
      counts: 0, // 数据总数
      tableData: [],
      dialog: false,
      topicInfo: {}// 题目信息
    }
  },
  created () {
    this.loadArticlesList()
  },
  computed: {},
  methods: {
    // 获取文章列表
    async loadArticlesList (form) {
      const { data } = await questionList({ ...this.pageData, ...form })
      this.counts = data.counts
      this.tableData = data.items
    },
    // 每页几条数据该表
    async handleSizeChange (val) {
      this.pageData.pagesize = val
      await this.loadArticlesList(this.form)
    },
    // 当前页码改变
    async handleCurrentChange (val) {
      this.pageData.page = val
      await this.loadArticlesList(this.form)
    },
    questionType (val) {
      if (val === 1) {
        return '单选'
      } else if (val === 2) {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficulty (val) {
      if (val === 1) {
        return '简单'
      } else if (val === 2) {
        return '一般'
      } else {
        return '困难'
      }
    },
    onSearch (form) {
      this.pageData.page = 1
      this.pageData.pagesize = 5
      this.form = form
      this.loadArticlesList(form)
    },
    // 删除
    delBtn (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await questionRemove(id)
        this.$message.success('删除成功')
        await this.loadArticlesList()
        if (!this.tableData.length) {
          this.pageData.page--
          await this.loadArticlesList()
        }
      }).catch()
    },
    // 加入精选
    toFeatured (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await choiceAdd({ id: id, choiceState: 1 })
        this.$message.success('加入精选成功')
        await this.loadArticlesList()
        if (!this.tableData.length) {
          this.pageData.page--
          await this.loadArticlesList()
        }
      }).catch()
    },
    async topicPreview (id) {
      this.dialog = true
      const res = await questionDetail({ id })
      res.data.options.sort((a, b) => {
        return (a.code.charCodeAt() + '') > (b.code.charCodeAt() + '') ? 1 : -1
      })
      console.log(res)
      this.topicInfo = res.data
    }
  }
}
</script>

<style lang='less' scoped>
.container {
  /deep/ .el-pagination__jump {
    margin-left: 0;
  }
}
</style>
